<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        省份:
<!--        <select @change="changePro" v-model="proId">-->
        <select  v-model="proId">
            <option value="-1">--请选择--</option>
            <option value="0">江西省</option>
            <option value="1">浙江省</option>
            <option value="2">江苏省</option>
        </select>

        城市：
            <select>
                <option value="-1">--请选择--</option>
                <option v-for="cityName in cities">{{cityName}}</option>
            </select>


        <hr>

        <button @click="now">获取当前系统时间</button>
        <br>
        <button @click="inTime">获取进入页面的时间</button>
    </div>

    <script>

        let pros = [
            ["南昌市","九江市","上饶市"],
            ["杭州市","温州市","台州市","丽水市"],
            ["南京市","苏州市","无锡市"]
        ];

        new Vue({
            el:"#app",
            data:{
                proId:-1,
                cities:[],
                // intime:""
            },
            methods:{
                changePro(){
                    this.cities = pros[this.proId]
                },

                now(){
                    alert(new Date().getTime())
                },

                inTime(){
                    alert(this.intime)
                }
            },
            //属性监听：一种监听机制，监听某些属性值的改变，一旦被监听的属性值发生改变，就会触发对应的监听器代码
            watch:{
                // 语法-  被监听属性的名称：监听器代码（回调函数）
                proId:function (newVal,oldVal){
                    this.cities = pros[newVal]
                }
            },

            //计算属性： 本质还是一个属性，只不过这个属性的值是通过复杂业务运算后的结果
            computed:{
                //注意：因为计算属性本质还是一个属性，这里属性名称和data中的属性名称不允许重复
                //这个属性函数的值只会计算一次 。（有点类似于java中的static静态代码块）
                intime:function (){
                    //这个地方可以实现复杂业务处理
                    return new Date().getTime();
                }
            }
        });
    </script>
</body>
</html>